<template>
	<view class="list-right">
		<view class="author-img">
			<image class="img" src="../static/author.jpg"></image>
			<view class="add" v-show="isShow" @click="hide">
				+
			</view>
		</view>
		<view :style="color" @click="changeColor" class="iconfont icon-aixin right-box">
		</view>
		<view class="number">
			{{rightText.loverNumber}}
		</view>
		<view class="iconfont icon-custom-comment right-box" @click=openComment()>
		</view>
		<view class="number">
			{{rightText.commintNumber}}
		</view>
		<view class="iconfont icon-fenxiang right-box">
		</view>
		<view class="number">
			{{rightText.shareNumber}}
		</view>
		<view class="around">
			<image class="img" src="../static/11.jpg" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default{
		props:["rightText"],
		data(){
			return{
				isShow:true,
				color:""
			}
		},
		methods:{
			hide(){
				this.isShow=false
			},
			changeColor(){
				this.color=this.color===""?"color:red":""
			},
			changLove(){
				this.color="color:red"
			},
			openComment(){
				this.$emit("open")
			}
		}
	}
</script>

<style>
	.list-right{
		width: 50px;
		margin: 0 auto;
	}
	.author-img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
		border:2px solid #FFFFFF;
		position: relative;
	}
	.add{
		width: 18px;
		height: 18px;
		border-radius: 50%;
		background: red;
		text-align: center;
		line-height: 18px;
		position: absolute;
		bottom: -9px;
		left:19px;
		
	}
	.img{
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}
	.right-box{
		width: 50px;
		height: 40px;
		margin-top:18px;
		text-align: center;
		line-height: 40px;
		color: #FFFFFF;
		font-size: 35px;
		
	}
	.number{
		font-size: 10px;
		text-align: center;
	}
	.around{
		margin-top: 15px;
		animation: roate 1.5s linear 0.2s infinite;
		width: 50px;
		height: 50px;
	}
	
	@keyframes roate{
		0%{
			transform: rotate(0deg);
		}
		100%{
			transform: rotate(360deg);
		}
	}
</style>
